<template>
  <div class="detail">
    <div class="nav">
      <van-nav-bar
        title="房屋详情"
        left-text="旅途"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="Swiper">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          v-for="(value, key) in detailData?.mainPart?.topModule.housePicture
            .housePics"
          :key="key"
        >
          <img :src="value.url" alt="" />
        </van-swipe-item>
        <template #indicator="{ active, total }">
          <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
        </template>
      </van-swipe>
    </div>
      <Intro  v-if="detailData" :Data="detailData?.mainPart?.topModule"></Intro>

  </div>
</template>

<script setup>
 
 import { storeToRefs } from "pinia";
 import { useDetailstore } from "../../../stores/modules/detailStore";
import { useRouter } from "vue-router";
//引入组件的
import Intro from './detail/Intro.vue'

//点击返回回到home目录
const router = useRouter();
function onClickLeft() {
  router.push("/home");
}

//获取数据并展示
const { detailData } = storeToRefs(useDetailstore());
console.log("detail:", detailData);

</script>


  
<style lang="less" scoped>
.detail {
  .nav {
    --van-nav-bar-text-color: #ff9854;
    --van-nav-bar-icon-color: #ff9854;
  }

  .Swiper {
    .my-swipe {
      img {
        height: 40vh;
        width: 100vh;
      }

      .custom-indicator {
        position: relative;
        bottom: 30px;
        left: 49vh;
      }
    }
  }
}
</style>